<template>
  <div>
    <input @change="change" :multiple="multiple" type="file" id="file"/>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  props: {
    multiple: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    change: function (e) {
      // this.$emit('update:file',e.target.file)

      if (e.target.files[0].type === "application/json") {
        this.$emit("file", e.target.files[0])
      } else {
        this.$message({
          type: "error",
          message: `${e.target.files[0].name} 不符合格式`
        })
      }
    },
    click: function () {
      const file = document.querySelector("#file")
      file.click()
    }
  }
}
</script>
